<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" ref="filters" :rules="rules">
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="交易类型" prop="tradeType">
					<el-select v-model="filters.tradeType" placeholder="交易类型" clearable>
						<el-option label="充值" value="1"></el-option>
						<el-option label="购买鸿福商品" value="2"></el-option>
						<el-option label="购买积分商品" value="3"></el-option>
						<el-option label="购买旅游产品" value="4"></el-option>
						<el-option label="积分赠送" value="5"></el-option>
						<el-option label="注册赠送" value="6"></el-option>
						<el-option label="每日签到" value="7"></el-option>
						<el-option label="系统赠送" value="8"></el-option>
						<el-option label="系统扣除" value="9"></el-option>
						<el-option label="邀请好友" value="10"></el-option>
						<el-option label="分销提成" value="11"></el-option>
						<el-option label="报名活动" value="12"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="searchType">
					<el-select v-model="filters.searchType" clearable>
						<el-option label="交易人ID" value="1"></el-option>
						<el-option label="交易人昵称" value="2"></el-option>
						<el-option label="交易单号" value="3"></el-option>
						<el-option label="交易对象昵称" value="4"></el-option>
						<el-option label="交易对象ID" value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" prop="searchType" v-if="!filters.searchType == ''">
					<el-input v-if="filters.searchType == '1'" v-model="filters.keyword" placeholder="交易人ID"></el-input>
					<el-input v-if="filters.searchType == '2'" v-model="filters.keyword" placeholder="交易人昵称"></el-input>
					<el-input v-if="filters.searchType == '3'" v-model="filters.keyword" placeholder="交易单号"></el-input>
					<el-input v-if="filters.searchType == '4'" v-model="filters.keyword" placeholder="交易对象昵称"></el-input>
					<el-input v-if="filters.searchType == '5'" v-model="filters.keyword" placeholder="交易对象ID"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getWaterList">查找</el-button>
				</el-form-item>
				<!--<el-form-item>
					<el-button type="primary"  @click="systemGive">系统赠送积分</el-button>
					<el-button type="primary" @click="systemBuckle">系统代扣积分</el-button>
					<el-button type="warning" @click="systemGive2">系统赠送金额</el-button>
					<el-button type="warning" @click="systemBuckle2">系统代扣金额</el-button>
					<el-button type="danger" @click="systemBuckle3">可提现金额+</el-button>
					<el-button type="danger" @click="systemGive3">可提现金额-</el-button>
				</el-form-item>-->
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="waterList" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column prop="id" label="序号" align="center">
			</el-table-column>
			<el-table-column prop="tradeNo" label="交易单号" align="center" min-width="180">
			</el-table-column>
			<el-table-column prop="tradeUserId" label="交易人ID" align="center">
			</el-table-column>
			<el-table-column prop="tradeNickname" label="交易人昵称" align="center">
			</el-table-column>
			<el-table-column prop="tradeType" label="交易类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.tradeType == 1">充值</span>
					<span v-if="scope.row.tradeType == 2">购买鸿福商品</span>
					<span v-if="scope.row.tradeType == 3">购买积分商品</span>
					<span v-if="scope.row.tradeType == 4">购买旅游商品</span>
					<span v-if="scope.row.tradeType == 5">积分赠送</span>
					<span v-if="scope.row.tradeType == 6">注册赠送</span>
					<span v-if="scope.row.tradeType == 7">每日签到</span>
					<span v-if="scope.row.tradeType == 8">系统赠送</span>
					<span v-if="scope.row.tradeType == 9">系统扣除</span>
					<span v-if="scope.row.tradeType == 10">邀请好友</span>
					<span v-if="scope.row.tradeType == 11">分销提成</span>
					<span v-if="scope.row.tradeType == 12">报名活动</span>
					<span v-if="scope.row.tradeType == 13">积分赠送</span>
					<span v-if="scope.row.tradeType == 14">积分代扣</span>
					<span v-if="scope.row.tradeType == 15">活动退款</span>
					<span v-if="scope.row.tradeType == 16">购买鸿福商品退款</span>
					<span v-if="scope.row.tradeType == 17">购买旅游商品退款</span>
					<span v-if="scope.row.tradeType == 18">购买积分商品退分</span>
					<span v-if="scope.row.tradeType == 19">可提现金额+</span>
					<span v-if="scope.row.tradeType == 20">可提现金额-</span>
					<span v-if="scope.row.tradeType == 21">购买积分</span>
					<span v-if="scope.row.tradeType == 22">积分赠送+</span>
					<span v-if="scope.row.tradeType == 23">积分赠送-</span>
				</template>
			</el-table-column>
			<el-table-column prop="amount" label="交易价格" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.credits == undefined">{{scope.row.amount}}元</span>
					<span v-if="!scope.row.credits == '' || undefined">{{scope.row.credits}}积分</span>
				</template>
			</el-table-column>
			<el-table-column prop="tradeObjUserId" label="交易对象ID" align="center">
			</el-table-column>
			<el-table-column prop="tradeObjNickname" label="交易对象昵称" align="center">
			</el-table-column>
			<el-table-column prop="tradeTime" label="时间" align="center" min-width="180">
			</el-table-column>
		</el-table>
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		
		<!--系统赠送积分弹出框-->
		<el-dialog title="系统赠送积分" :visible.sync="dialogSystemGive" size="tiny">
			<el-form label-position="left" :model="systemGiveForm" ref="systemGiveForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemGiveForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送积分" label-width="140px" prop="money">
					<el-input v-model="systemGiveForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSystemGive = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemGive('systemGiveForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统代扣积分弹出框-->
		<el-dialog title="系统代扣积分" :visible.sync="dialogystemBuckle" size="tiny">
			<el-form :model="systemBuckleForm" label-position="left"  ref="systemBuckleForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemBuckleForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="扣除积分" label-width="140px" prop="money">
					<el-input v-model="systemBuckleForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogystemBuckle = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemBuckle('systemBuckleForm')">确 定</el-button>
			</div>
		</el-dialog>
		
		
		<!--系统赠送金额弹出框-->
		<el-dialog title="系统赠送金额" :visible.sync="dialogSystemGive2" size="tiny">
			<el-form :model="systemGiveForm2" ref="systemGiveForm2" :rules="rule2">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemGiveForm2.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送金额" label-width="140px" prop="money">
					<el-input v-model.number="systemGiveForm2.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSystemGive2 = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemGive2('systemGiveForm2')">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统代扣金额弹出框-->
		<el-dialog title="系统代扣金额" :visible.sync="dialogystemBuckle2" size="tiny">
			<el-form :model="systemBuckleForm2" ref="systemBuckleForm2" :rules="rule2">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemBuckleForm2.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送金额" label-width="140px" prop="money">
					<el-input v-model.number="systemBuckleForm2.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogystemBuckle2 = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemBuckle2('systemBuckleForm2')">确 定</el-button>
			</div>
		</el-dialog>
		
		<!--可提现金额余额-->
		<el-dialog title="可提现金额+" :visible.sync="dialogystemBuckle3" size="tiny">
			<el-form :model="systemBuckleForm3" ref="systemBuckleForm3" :rules="rule3">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemBuckleForm3.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="添加可提现金额" label-width="140px" prop="money">
					<el-input v-model.number="systemBuckleForm3.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogystemBuckle3 = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemBuckle3('systemBuckleForm3')">确 定</el-button>
			</div>
		</el-dialog>
		
		<!--减少提现金额弹出框-->
		<el-dialog title="可提现金额-" :visible.sync="dialogSystemGive3" size="tiny">
			<el-form :model="systemGiveForm3" ref="systemGiveForm3" :rules="rule3">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemGiveForm3.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="可提现金额-" label-width="140px" prop="money">
					<el-input v-model.number="systemGiveForm3.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSystemGive3 = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemGive3('systemGiveForm3')">确 定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { getWaterList, giveFund, reduceFund, givePoints, reducePoints } from '@/api/api';
	export default {
		data() {
			let validateInput = (rule, value, callback) => {
				if (!value) {
					callback(new Error('不能为空'));
				} else {
					callback();
				}
			};
			return {
				filters: {
					date: '',
					searchType: '',
					tradeType: '',
					keyword: ''
				},
				start: '',
				end: '',
				rules: {
					input: [
						{validator: validateInput, trigger: 'blur' }
					]
				},
				waterList: [],
				total: 0,
				size: 10,
				currentPage: 1,
				listLoading: false,
				
				// 系统赠送积分弹出框
				dialogSystemGive: false,
				systemGiveForm: {
					ID: '',
					money: ''
				},
				// 系统代扣积分弹出框
				dialogystemBuckle: false,
				systemBuckleForm: {
					ID: '',
					money: '',
					canAmount: ''
				},
				rule: {
					/*ID: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					money: [
						{required: true, message: '不能为空', trigger: 'blur'}
					]*/
				},
				
				// 系统赠送弹出框
				dialogSystemGive2: false,
				systemGiveForm2: {
					ID: '',
					money: ''
				},
				
				// 系统代扣弹出框
				dialogystemBuckle2: false,
				systemBuckleForm2: {
					ID: '',
					money: ''
				},
				rule2: {
					/*ID: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					money: [
						{required: true, validator: validateNumber, trigger: 'change'},
					],*/
				},
				
				// 可提现余额-弹出框
				dialogSystemGive3: false,
				systemGiveForm3: {
					ID: '',
					money: ''
				},
				// 可提现余额+弹出框
				dialogystemBuckle3: false,
				systemBuckleForm3: {
					ID: '',
					money: ''
				},
				rule3: {
					/*ID: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					money: [
						{required: true, validator: validateNumber, trigger: 'change'},
					],*/
				}
				
			}
		},
		methods: {
			getTime() {
				let starttime,endtime = ''
				let time = this.filters.date;
				if(!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(starttime == "Invalid date"){
					starttime="";
				};
				if(endtime == "Invalid date"){
					endtime="";
				};
				this.start = starttime
				this.end = endtime
			},
			//获取流水明细列表
			getWaterList() {
				this.getTime();
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				}
				if(!this.start == '') {
					para.startTime = this.start
				}
				if(!this.end == '') {
					para.endTime = this.end
				}
				if(!this.filters.tradeType == '') {
					para.tradeType = this.filters.tradeType
				}
				
				if(!this.filters.searchType == '') {
					para.type = this.filters.searchType
					if(this.filters.searchType == 1) {
						para.userId = this.filters.keyword
					}
					if(this.filters.searchType == 2) {
						para.nickName = this.filters.keyword
					}
					if(this.filters.searchType == 3) {
						para.orderNo = this.filters.keyword
					}
					if(this.filters.searchType == 4) {
						para.objId = this.filters.keyword
					}
					if(this.filters.searchType == 5) {
						para.objNickName = this.filters.keyword
					}
				}
				getWaterList(para).then((res) => {
					this.filters.keyword = ''
					this.waterList = res.data.data
					this.total = res.data.totalCount
				})
			},
			
			
			systemGive() {
				// 点击系统赠送
				this.dialogSystemGive = true
			},
			//系统赠送积分
			submitSystemGive(systemGiveForm) {
				this.$refs[systemGiveForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemGiveForm.ID,
							amount: this.systemGiveForm.money,
							type: 13
						};
						givePoints(para).then((res) => {
							this.dialogSystemGive = false
							this.getWaterList()
						})
					}
				})
			},
			systemBuckle() {
				// 点击系统代扣
				this.dialogystemBuckle = true
			},
			//系统扣除积分
			submitSystemBuckle(systemBuckleForm) {
				this.$refs[systemBuckleForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemBuckleForm.ID,
							amount: this.systemBuckleForm.money,
							type: 14
						};
						console.log(para);
						reducePoints(para).then((res) => {
							this.dialogystemBuckle = false
							this.getWaterList()
						})
					}
				})
			},
			
			
			systemGive2() {
				// 点击系统赠送
				this.dialogSystemGive2 = true
			},
			//赠送余额
			submitSystemGive2(systemGiveForm2) {
				this.$refs[systemGiveForm2].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemGiveForm2.ID,
							amount: parseInt(this.systemGiveForm2.money),
							type: 8
						}
						
						giveFund(para).then((res) => {
							this.dialogSystemGive2 = false
							this.getWaterList()
						})
					}
				})
			},
			systemBuckle2() {
				// 点击系统代扣
				this.dialogystemBuckle2 = true
			},
			//代扣余额
			submitSystemBuckle2(systemBuckleForm2) {
				this.$refs[systemBuckleForm2].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemBuckleForm2.ID,
							amount: parseInt(this.systemBuckleForm2.money),
							type: 9
						}
						reduceFund(para).then((res) => {
							this.dialogystemBuckle2 = false
							this.getWaterList()
						})
					}
				})
			},
			
			// 添加提现
			systemBuckle3() {
				this.dialogystemBuckle3 = true
			},
			submitSystemBuckle3(systemBuckleForm3) {
				this.$refs[systemBuckleForm3].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemBuckleForm3.ID,
							amount: parseInt(this.systemBuckleForm3.money),
							type: 19,
							isPresent: 0
						}
						giveFund(para).then((res) => {
							this.dialogystemBuckle3 = false
							this.getWaterList()
						})
					}
				})
			},
			// 减少提现
			systemGive3() {
				this.dialogSystemGive3 = true
			},
			submitSystemGive3(systemGiveForm3) {
				this.$refs[systemGiveForm3].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemGiveForm3.ID,
							amount: parseInt(this.systemGiveForm3.money),
							type: 20,
							isPresent: 0
						}
						
						reduceFund(para).then((res) => {
							this.dialogSystemGive3 = false
							this.getWaterList()
						})
					}
				})
			},
			
			// 分页详情
			handleSizeChange(val) {
				this.size = val;
				this.getWaterList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getWaterList();
			}
		},
		mounted() {
			this.getWaterList();
		},
	}

</script>

<style scoped>

</style>
